<template>
	<view class="goods-main">
		<view class="title-box" @click="back()">
			<!-- <view class="title">荷式拍卖列表</view> -->
			<text class="iconfont icon-left"></text>
		</view>
		<!-- 头部开始 -->
		<view class="goods-header-wrap">
			<view class="goods-header-item" :class="{'goods-header-item-action' : 0 == goodsNav}" @click="setNav(0)">待上架
			</view>
			<view class="goods-header-item" :class="{'goods-header-item-action' : 1 == goodsNav}" @click="setNav(1)">出售中
			</view>
		</view>
		<!-- 头部结束 -->

		<!-- 商品列表开始 -->
		<view v-for="(item, index) in goodsList" v-if="goodsList" class="goods-item-wrap" @click="selectTap(item.id)">
			<image :src="global+item.image" class="goods-image" />

			<view class="goods-content-wrap">
				<view class="goods-name">{{ item.name }}</view>

				<view class="goods-stock-wrap">
					<view class="goods-stock">库存 {{ item.count }}</view>
					<view class="goods-sell-count">销量 {{ item.sell }}</view>
				</view>

				<view class="goods-price">￥{{ item.startPrice }}</view>

				<view class="goods-option" @click.stop="">
					<view class="goods-option-item" @tap="editPrice(item)">改价格</view>
					<view class="goods-option-item" @tap="editStock(item)">改库存</view>
					<view class="goods-option-item" @tap="editStatus(item)">
						{{ item.status ? '下架' : '上架'}}
					</view>
					<view class="goods-option-item goods-option-item-action" @tap="editGoods(item.productId)">编辑</view>
				</view>
			</view>
		</view>
		<!-- 商品列表结束 -->

		<!-- 空白页开始 -->
		<view class="goods-empty-wrap" v-if="goodsList.length <= 0">
			暂无商品
		</view>
		<!-- 空白页结束 -->

		<!-- 发布商品开始 -->
		<view class="publish-goods-wrap">
			<view class="publish-goods-btn" @click="addGoods()">发布商品</view>
		</view>
		<!-- 发布商品结束 -->
	</view>
</template>

<script>
	import G from '@/config/global.js'
	import apis from '@/api/index.js'
	import {
		requestApi,
		uphttp
	} from '@/utils/request.js'
	// 导入公共组件方法
	import common from '@/common/js/common.js';
	export default {
		data() {
			return {
				goodsList: [],
				goodsNav: 0,
				form: {
					ownerId: ""
				},
				user: {},
				global: G.REQUEST_URL
			}
		},
		onLoad() {
			this.user = uni.getStorageSync("user");

			this.getList();
		},
		methods: {
			getList() {
				this.form = {};
				this.form.ownerId = this.user.userId;
				this.form.status = this.goodsNav;
				requestApi(apis.products.list, this.form, 'get').then(res => {
					this.goodsList = res.data;
				})
			},
			selectTap(id) {
				console.log("tap item id:" + JSON.stringify(id));
			},
			editGoods(id) {
				uni.navigateTo({
					url: "/pages/add/add?status=1&id=" + id
				})
				console.log("edit item id:" + id);
			},
			editStatus(item) {
				if (item.status == 0) {
					item.status = 1

				} else {
					item.status = 0
				}
				this.form = item;
				requestApi(apis.products.update, this.form, 'post').then(res => {
					if (res.code == 200) {
						this.getList()
						uni.showToast({
							icon: "success",
							title: "修改成功"
						})
						this.getList();
					}
				});
				console.log("edit item id:" + id);
			},
			editPrice(item) {
				uni.showModal({
					title: '请输入更改的价格',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入价格', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							item.startPrice = res.content;
							this.form = item;
							requestApi(apis.products.update, this.form, 'post').then(res => {
								if (res.code == 200) {

									uni.showToast({
										icon: "success",
										title: "修改成功"
									})
									this.getList()
								}
							});
							// console.log('输入的内容：', res.content);
						}
					}
				})
			},
			editStock(item) {
				uni.showModal({
					title: '更改库存',
					content: '',
					editable: true, //是否显示输入框
					placeholderText: '请输入现有库存量', //输入框提示内容
					confirmText: '确认',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							item.count = res.content;
							this.form = item;
							requestApi(apis.products.update, this.form, 'post').then(res => {
								if (res.code == 200) {

									uni.showToast({
										icon: "success",
										title: "修改成功"
									})
									this.getList()
								}
							});
							// console.log('输入的内容：', res.content);
						}
					}
				})
			},
			addGoods() {
				uni.navigateTo({
					url: "/pages/add/add"
				})

			},
			setNav(goodsNav) {
				this.goodsNav = goodsNav;
				this.form.status = this.goodsNav;
				this.getList();
				console.log("tap set nav " + goodsNav);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style scoped>
	.top {
		height: 20px;
		background-color: #fff;
		width: 100%;
	}

	.goods-main {
		min-height: 100vh;
		background: #f7f8fa;
		padding-top: 0rpx;
		padding-bottom: 240rpx;
	}

	.goods-item-wrap {
		background: #FFFFFF;
		display: flex;
		padding: 24rpx;
		margin: 12rpx;
		border-radius: 8rpx;
	}

	.goods-content-wrap {
		padding-left: 24rpx;
	}

	.goods-option {
		display: flex;
	}

	.goods-option-item {
		background: #f4f4f6;
	}

	.goods-image {
		width: 190rpx;
		height: 200rpx;
		border-radius: 12rpx;
		flex: none;
	}

	.goods-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.goods-stock-wrap {
		display: flex;
		color: #969696;
		font-size: 24rpx;
		margin-top: 12rpx;
	}

	.goods-stock {
		margin-right: 24rpx;
	}

	.goods-price {
		font-size: 48rpx;
		color: #e7612e;
		margin-top: 24rpx;
	}

	.goods-option-item {
		padding: 8rpx 16rpx;
		border-radius: 36rpx;
		font-size: 24rpx;
		margin-top: 24rpx;
	}

	.goods-option-item:not(:last-child) {
		margin-right: 24rpx;
	}

	.goods-option-item-action {
		background: #f1f0fe;
		color: #6991ce;
	}

	.goods-item-wrap {
		margin-top: 24rpx;
	}

	.goods-header-wrap {
		display: flex;
		align-items: center;
		padding: 24rpx;
		background: #FFFFFF;
	}

	.goods-header-item-action {
		font-size: 36rpx;
		font-color: #333333;
		font-weight: bold;
		position: relative;
	}

	.goods-header-item-action::after {
		position: absolute;
		left: 0;
		right: 0;
		background: #4372fe;
		height: 8rpx;
		content: "";
		bottom: -12rpx;
	}

	.goods-header-item {
		margin-right: 24rpx;
	}

	.publish-goods-wrap {
		background: rgba(255, 255, 255, .5);
		padding: 24rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.publish-goods-btn {
		margin: 24rpx;
		background: #4f7df5;
		color: #FFFFFF;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 82rpx;
	}

	.goods-empty-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 40%;
	}
</style>